<template>
  <div>
    <van-nav-bar
      title="力量添加"
      left-text=""
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <div class="powerAddcon">
      <van-search
        v-model="key"
        placeholder="请输入联系方式"
        show-action
        @clear="clearhandle"
      >
        <template slot="action">
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <div class="sealist" v-show="listshow">
        <div
          class="grid-item"
          v-for="(item, index) in sealist"
          :key="index"
          @click="itemhandle"
        >
          <van-radio-group v-model="radio">
            <van-radio :name="index">
              <b>{{ item.name }} </b>
              <span>联系方式：{{ item.mobile }}</span>
            </van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="errsea" v-show="errshow">此电话所有者未加入政务微信</div>
      <div class="errseaphone" v-show="errPshow">请输入准确的手机号</div>
    </div>
    <van-popup
      v-model="popupshow"
      round
      @close="pcolsehandle"
      position="bottom"
      :style="{ height: '240px' }"
    >
      <div class="changeform">
        <div class="cformt">用户添加</div>
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="tel"
            name="联系方式"
            label="联系方式"
            placeholder="联系方式"
            :rules="[{ required: true, message: '请填写联系方式' }]"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="dept"
            label="部门"
            placeholder="街道网格"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <div class="dform">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              @click="submitInfo"
              color="linear-gradient(90deg, #00C4C6 0%, #01DC8E 100%)"
              >确认</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { powerGetWeiXin,powerAdd } from '../../../utils/api'
export default {
  name: "powerAdd",
  data() {
    return {
      key: "",
      radio: -1,
      list: [
        {
          id: "1",
          name: "张三",
          tel: "17789765645",
        },
        {
          id: "2",
          name: "李四",
          tel: "17789765635",
        },
      ],
      sealist: [],
      username: "",
      tel: "",
      dept: "",
      popupshow: false,
      showPicker: false,
      columns: ["街道网格", "城管执法"],
      listshow: false,
      errshow: false,
      errPshow:false,
    };
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/regulatoryPower" });
    },
    itemhandle() {
      this.popupshow = true;
      this.username = this.sealist[0].name;
      this.tel = this.sealist[0].mobile
    },
    onSubmit() {
    },
    submitInfo(){
      if(this.dept == '街道网格'|| this.dept == ''){
        this.sealist[0]['part'] = 'law';
        this.sealist[0]['partName'] = '街道网格';
      }else{
        this.sealist[0]['part'] = 'street_grid';
        this.sealist[0]['partName'] = this.dept;
      }
      let params = this.sealist[0];
      powerAdd(params).then((res)=>{
        if(res.code === 200){
          Toast.success(res.message)
        }else{
          Toast.fail(res.message)
        }
      })
    },
    onConfirm(value) {
      this.dept = value;
      this.showPicker = false;
    },
    pcolsehandle() {
      this.radio = -1;
    },
    onSearch() {
      let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!myreg.test(this.key)) {
        this.errPshow = true;
      }else{
        this.errPshow = false;
        powerGetWeiXin(this.key).then((res) =>{
          if(res.code === 200 && res.data !=''){
            const that = this;
            that.sealist.push({
              mobile: res.data.mobile,
              name: res.data.name,
              userid: res.data.userid,
            })
            that.listshow = true;
            that.errshow = false;
          }else{
            this.listshow = false;
            this.errshow = true;
          }
        })
        // for (let i = 0, l = this.list.length; i < l; i++) {
        //   if (this.key.indexOf(this.list[i].tel) !== -1) {
        //     this.sealist.push(this.list[i]);
        //     this.listshow = true;
        //     this.errshow = false;
        //     break
        //   } else {
        //     this.sealist = [];
        //     this.listshow = false;
        //     this.errshow = true;
        //   }
        // }
      }
      // debugger

    },
    clearhandle(val) {
      this.sealist = [];
      this.listshow = false;
      this.errshow = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.powerAddcon {
  margin-top: 46px;
}
.sealist {
  width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
  background: #fff;
  margin-top: 1px;
}
.grid-item {
  width: 100%;
  padding: 15px 0px;
  border-bottom: 1px #f5f5f5 solid;
}
.grid-item b {
  padding-right: 40px;
  padding-left: 10px;
}
.grid-item span {
  color: #6e6e6e;
  font-weight: bold;
}
.grid-item:last-child {
  border: none;
}
.changeform {
  margin-top: 10px;
}
.cformt {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
}
.dform {
  width: 90%;
  margin: 10px auto;
}
.errsea {
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #f57665;
}
.errseaphone{
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #f57665;
}
</style>
